<template>
  <div class="main_box">
    <el-row>
      <el-col :span="12">
        <Crumbs></Crumbs>
      </el-col>
      <el-col :span="12">
        <div class="opration_wrap">
          <el-button type="primary" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
      </div>
      <el-form   label-width="200px" >
        <el-row>
          <el-form-item  label="头像：" class="img_item" >
            <div class="img photo">
              <img @click="$imageViewer" :src="detailData.imageUrl" />
            </div>
          </el-form-item>
          <el-form-item label="客户编号：" >
            <span>{{detailData.customerCode}}</span>
          </el-form-item>
          <el-form-item label="客户昵称：" >
            <span>{{detailData.customerNickName}}</span>
          </el-form-item>
          <el-form-item label="客户姓名：" >
            <span>{{detailData.customerName}}</span>
          </el-form-item>
          <el-form-item label="手机号码：" >
            <span>{{detailData.tel}}</span>
          </el-form-item>
          <el-form-item label="客户性别：" >
            <span>{{formatSex(detailData.sex)}}</span>
          </el-form-item>
          <el-form-item label="所在地区：" >
            <span>{{detailData.chooseProvinceName}}</span> <span>{{detailData.chooseCityName}}</span>
          </el-form-item>
          <el-form-item label="简介：" >
            <span>{{detailData.userIntroduce}}</span>
          </el-form-item>
        </el-row>
        <div class="tit">
          <h2>账户信息</h2>
        </div>
        <el-row>
          <el-form-item label="银行账号：" >
            <span>{{detailData.bankAccountNo}}</span>
          </el-form-item>
          <el-form-item label="银行预留手机号：" >
            <span>{{detailData.bankTel}}</span>
          </el-form-item>
          <el-form-item label="身份证号：" >
            <span>{{detailData.cardId}}</span>
          </el-form-item>
          <el-form-item label="身份证正面照：" class="img_item" >
            <div class="img_card ">
              <img @click="$imageViewer" :src="detailData.cardFrontUrl" />
            </div>
          </el-form-item>
          <el-form-item label="身份证反面照：" class="img_item" >
            <div class="img_card ">
              <img @click="$imageViewer" :src="detailData.cardBackUrl" />
            </div>
          </el-form-item>
        </el-row>
        <div class="tit">
          <h2>其他信息</h2>
        </div>
        <el-row>
          <el-form-item label="邮箱地址：" >
            <span>{{detailData.email}}</span>
          </el-form-item>
          <el-form-item label="最高学历：" >
            <span>{{formatEducation(detailData.education)}}</span>
          </el-form-item>
          <el-form-item label="婚姻状况：" >
            <span>{{formatMaritalStatus(detailData.maritalStatus)}}</span>
          </el-form-item>
          <el-form-item label="有无子女："  >
            <span>{{formatHaveChildren(detailData.haveChildren)}}</span>
          </el-form-item>
          <el-form-item label="子女个数：" v-if="detailData.haveChildren ==1">
            <span>{{detailData.childrenNum}}</span> <span v-if="detailData.childrenNum && detailData.childrenNum>=0">位</span>
          </el-form-item>
          <el-form-item label="常住城市：" >
            <span>{{detailData.residentProvinceName}} {{detailData.residentCityName}}</span>
          </el-form-item>
          <el-form-item label="居住年份：" >
            <span>{{detailData.residentYearNum}}</span> <span v-if="detailData.residentYearNum && detailData.residentYearNum>=0">年</span>
          </el-form-item>
          <el-form-item label="居住地址：" >
            <span>{{detailData.liveProvinceName}} {{detailData.liveCityName}} {{detailData.liveAreaName}} {{detailData.liveAddress}}</span>
          </el-form-item>
          <el-form-item label="工作单位：" >
            <span>{{detailData.workName}}</span>
          </el-form-item>
          <el-form-item label="单位地址：" >
            <span>{{detailData.workProvinceName}} {{detailData.workCityName}} {{detailData.workAreaName}} {{detailData.workAddress}}</span>
          </el-form-item>
          <el-form-item label="所属部门：" >
            <span>{{detailData.workDepart}}</span>
          </el-form-item>
          <el-form-item label="担任职务：" >
            <span>{{detailData.workPosition}}</span>
          </el-form-item>
          <el-form-item label="入职时间：" >
            <span>{{formatEntryTime(detailData.entryTime)}}</span>
          </el-form-item>
          <el-form-item label="单位性质：" >
            <span>{{formatWorkType(detailData.workType)}}</span>
          </el-form-item>
          <el-form-item label="月均工资：" >
            <span>{{detailData.monthPay}}</span> <span v-if="detailData.monthPay">元</span>
          </el-form-item>
          <el-form-item label="发薪日期：" >
            <span>{{detailData.monthPayDay}}</span> <span v-if="detailData.monthPayDay">日</span>
          </el-form-item>
          <el-form-item label="有无社保：" >
            <span>{{formatInsurance(detailData.haveSocialInsurance)}}</span>
          </el-form-item>
          <el-form-item label="工资发放形式：" >
            <span>{{formatPayForm(detailData.workPayForm)}}</span>
          </el-form-item>
          <el-form-item label="住房性质：" >
            <span>{{formatHousingType(detailData.housingType)}}</span>
          </el-form-item>
          <el-form-item label="信用卡数量：" >
            <span>{{formatCreditCardNum(detailData.creditCardNum)}}</span> <span v-if="detailData.creditCardNum || detailData.creditCardNum >=0">张</span>
          </el-form-item>
          <el-form-item label="单张额度one：" v-if="detailData.cardQuotaOne && detailData.creditCardNum && detailData.creditCardNum >0 ">
            <span>{{detailData.cardQuotaOne}}</span> <span v-if="detailData.cardQuotaOne">元</span>
          </el-form-item>
          <el-form-item label="单张额度two："  v-if="detailData.cardQuotaTwo && detailData.creditCardNum && detailData.creditCardNum >0">
            <span>{{detailData.cardQuotaTwo}}</span> <span v-if="detailData.cardQuotaTwo">元</span>
          </el-form-item>
          <el-form-item label="单张额度three：" v-if="detailData.cardQuotaThree && detailData.creditCardNum && detailData.creditCardNum >0" >
            <span >{{detailData.cardQuotaThree}}</span> <span v-if="detailData.cardQuotaThree">元</span>
          </el-form-item>
          <el-form-item label="其他贷款情况：" >
            <span>{{detailData.otherLoanSituation}}</span>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Crumbs from "@/components/Crumbs";
  import { FORMAT_DATE_YYYY_MM_DD } from "@/constants/constants";
  export default{
    data(){
      return {
        detailData: []
      }
    },
    components:{
      Crumbs
    },
    mounted(){
      this.init();
    },
    methods:{
      init(){
        this.getData();
      },
      getData(){
        this.$Get(this.$Config.api.customer, {customerId:this.$route.query.id})
          .then(res => {
            this.detailData = res.data;
          })
      },
      formatSex(val){
        if(val == 1){
          return "男";
        }else if(val==2){
          return "女";
        }
      },
      formatEducation(val){
        if(val == 1){
          return "高中";
        }else if(val==2){
          return "中专及以下";
        }else if(val==3){
          return "专科";
        }else if(val==4){
          return "本科";
        }else if(val==5){
          return "硕士及以上";
        }
      },
      formatMaritalStatus(val){
        if(val == 1){
          return "未婚";
        }else if(val==2){
          return "已婚";
        }else if(val==3){
          return "离异";
        }
      },
      formatHaveChildren(val){
        if(val == 0){
          return "无";
        }else if(val==1){
          return "有";
        }
      },
      formatWorkType(val){
        if(val == 1){
          return "行政机关";
        }else if(val==2){
          return "娱乐";
        }else if(val==3){
          return "三资企业";
        }else if(val==4){
          return "事业单位";
        }else if(val==5){
          return "民营";
        }else if(val==6){
          return "个体户";
        }else if(val==7){
          return "社会团体";
        }else if(val==8){
          return "国营";
        }
      },
      formatInsurance(val){
        if(val == 0){
          return "无";
        }else if(val==1){
          return "有";
        }
      },
      formatCreditCardNum(val){
        // console.log(val)
        if(val <0){
          return 0;
        }else if(val >=0){
          return val;
        }else{
          return null;
        }
      },
      formatPayForm(val){
        if(val == 1){
          return "现金";
        }else if(val==2){
          return "转账";
        }else if(val==3){
          return "现金和转账";
        }
      },
      formatHousingType(val){
        if(val == 1){
          return "自有房产";
        }else if(val==2){
          return "亲属房产";
        }else if(val==3){
          return "租房";
        }else if(val==4){
          return "单位宿舍";
        }
      },
      formatEntryTime(val){
        return this.$Utils.formatDate(val,'yyyy-MM-dd')
      },

      returnList(){
        this.$router.push({name: "客户列表"})
      }
    },
  }
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
